@use '~@angular/material' as mat;

@import 'src/styles';

.omv-dashboard-widget-chart {
  padding: $omv-padding;

  .chart {
    position: relative;

    .gauge-label {
      position: absolute;
      font-size: mat.font-size($omv-typography-config, body-1);
      font-weight: mat.font-weight($omv-typography-config, body-1);
    }
  }

  .advanced-label {
    margin-left: 8px;

    .total {
      margin-bottom: 8px;

      .total-value {
        font-size: mat.font-size($omv-typography-config, body-1);
      }

      .total-label {
        font-size: mat.font-size($omv-typography-config, caption);
      }
    }

    .items {
      .item {
        border-left: 3px solid;
        padding-left: 8px;

        .item-value {
          font-size: mat.font-size($omv-typography-config, body-1);
        }

        .item-label {
          font-size: mat.font-size($omv-typography-config, caption);
        }

        .item-percent {
          font-size: mat.font-size($omv-typography-config, body-1);
        }
      }
    }
  }
}
